<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>结构拆开</title>
	<script src="../js/jquery-1.10.1.min.js"></script>
</head>
<body>
	<div class="first-level mr20" id="dropBtn">
      <span class="mr5" id="pullBtn">沃尔沃XC902</span><i class="icon icon-down"></i>
      <!-- <div class="zhongjibox"> -->
      <div class="position position1">
		    <div class="con" id="con">
		      <div class="jxs-drop-layer" id="dropLayer">
			      <div class="widht">
			       	<ul class='drop-layer-cont'>
			       		<li><span>全部</span></li>
			       		<li><span>车型122</span></li>
			       		<li><span>车型222</span></li>
			       		<li><span>车型322</span></li>
			       		<li><span>车型422</span></li>
			       		<li><span>车型522</span></li>
			       		<li><span>车型622</span></li>
			       		<li><span>车型722</span></li>
			       	</ul>
		       	 </div>
		      </div>
		      <div class="Con_Scorll" id="Con_Scorll">
		        <div class="Do_Scorll" id="Do_Scorll"></div>
		      </div>
		    </div>
      </div>
      <div class="position position2">
	      <div class="box" id="box">
	        <div class="box-list" id="boxList">
	         	<ul class='box-list-cont'>
	         		<li>
	         			<!-- 无二级 -->
	         		</li>
	         		<li>
	         			<span>车型122-boxfdgfdgf</span>
	         			<span>车型122-box</span>
	         			<span>车型122-box</span>
	         			<span>车型122-box</span>
	         			<span>车型122-box</span>
	         		</li>
	         		<li>
	         			<span>车型222-box</span>
	         			<span>车型222-box</span>
	         			<span>车型222-box</span>
	         		</li>
	         		<li>
	         			<span>车型322-box</span>
	         			<span>车型322-box</span>
	         			<span>车型322-box</span>
	         		</li>
	         		<li>
	         			<span>车型422-box</span>
	         			<span>车型422-box</span>
	         		</li>
	         		<li>
	         			<span>车型522-box</span>
	         			<span>车型522-box</span>
	         			<span>车型522-box</span>
	         		</li>
	         		<li>
	         			<!-- 无二级 -->
	         		</li>
	         		<li>
	         			<span>车型722-box</span>
	         			<span>车型722-box</span>
	         			<span>车型722-box</span>
	         		</li>
	         	</ul>
	        </div>
	        <div class="Con_Scorll" id="Con_Scorll">
	          <div class="Do_Scorll" id="Do_Scorll"></div>
	        </div>
	      </div>
      </div>
    </div>
</body>
<script>
      $(function(){
        $('.drop-layer-cont li').hover(function(){
        	$('.box-list-cont li').hide().eq($(this).index()).show();
        })
        $('.box-list-cont li').hover(function(){
        	$(this).show();
        },function(){
        	$(this).hide();
        })
        // 阻止冒泡
        function stopPop(event){
          var event = event?event:window.event;
          if(event.stopPropagation){
              event.stopPropagation();
          }else{
              event.cancelBubble = true;
          }
        }
        var isShow = false;
        $('#pullBtn').on('click',function(){
          // console.log(this);
          if(!isShow){
            isShow = true;
            $('#con').show();
          console.log(document.getElementById('con').offsetWidth)
          console.log(document.getElementById('con').clientWidth)
          ScorllTop('#con','#dropLayer','#Con_Scorll','#Do_Scorll',document.getElementById('con').clientHidth);
          $('.erji-ul').css('left',document.getElementById('con').clientWidth+'px')
            // $('#con a').on('mouseover',function(){
            //   $(this).children().show()
            // }).on('mouseout',function(){
            //   $(this).children().hide()
            // })
          }else{
            isShow = false;
            $('#con').hide();
          }
        })
        $('#con a').on('click',function(){
          isShow = false;
          $('#con').hide();
          $('#pullBtn').text(this.childNodes[0].data);
          // console.log(this.childNodes[0].data)
        })
        $('#con a ul li').on('click',function(event){
          stopPop(event);
          isShow = false;
          $('#con').hide();
          $('#pullBtn').text($(this).text());
          console.log($(this).text());
        })

        //竖向的滚动条，四个参数，可视区域ID，内容区域Id，滚动条区域，滚动条，
        
        function ScorllTop(id1,id2,id3,id4,heights){
          var $container = $(id1),//可视区域
              $contanr   = $(id2),//内容区域
              $conScroll = $(id3),//滚动条活动区域
              $sroll     = $(id4),//滚动条
                startY   = 0,//开始位置  
                lastY    = 0,//结束位置
                  YN     = false,
                    bBtn = true;//判断滚动条上滚还是下滚

          $sroll.css({'height':$container.height()*$conScroll.height()/$contanr.outerHeight()+'px'});
          $sroll.css({'height':$container.height()*$conScroll.height()/heights+'px'});
          
          console.log($container.height()*$conScroll.height())
          console.log(heights)

          $sroll.mousedown(function(e){
              startY = e.clientY - this.offsetTop;  
              this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象
              YN = true;
              return false;
          });

          $sroll.mousemove(function(e){
              var maxVal = $conScroll.height() - $(this).height();
              if(YN){
                  lastY = e.clientY - startY;
                  lastY = lastY < 0 ? 0 :lastY;
                  lastY = lastY > maxVal ? maxVal : lastY;

                  $(this).css({'top':lastY+'px'});
                  $contanr.css({'top':-$conScroll.height()*lastY/$(this).height()+'px'});
                  window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖动文本  
                  e.stopPropagation(); 
              }
              
              return false;
          });

          $sroll.mouseup(function(e){
              YN = false;
              NumY = lastY;
              return false;
          });
          //为内容区域添加滑轮滚动事件
          if($contanr[0].addEventListener){
              $contanr[0].addEventListener('DOMMouseScroll',MouseScr,false);
              $conScroll[0].addEventListener('DOMMouseScroll',MouseScr,false);
          }
          //滑轮这部分代码是我参考的别人的，还不知道这句话是怎么个意思，求大神指点
          $contanr[0].onmousewheel = MouseScr;
          $conScroll[0].onmousewheel = MouseScr;
          function MouseScr(ev){
            var ev = ev || window.event,
              TopY = 0;
            if(ev.detail){
                bBtn = ev.detail>0  ?  true : false;
            }
            else{
                bBtn = ev.wheelDelta<0  ?  true : false;
            }
            if(bBtn){   //下
                TopY = $contanr.position().top-10;
            }
            else{  //上
                TopY = $contanr.position().top+10;
            }
            var maxTop = $contanr.outerHeight()-$container.outerHeight();
            TopY = TopY > 0 ? 0 : TopY;
            TopY = TopY < -maxTop ? -maxTop : TopY;

            console.log($conScroll.outerHeight());
            $contanr.css({'top':TopY+'px'});
            $sroll.css({'top':$sroll.height()*Math.abs(TopY)/$conScroll.height()+'px'});

            if(ev.preventDefault){
                ev.preventDefault();
            }
            else{
                return false;
            }
          }
        }
      });
    </script>
<style>
body{
	font-family: '微软雅黑'
}
ul,li {
	margin: 0;
	padding: 0;
    list-style: none;
}
ul{
	padding-right: 20px;
}
.position{
	top: 33px;
	position: absolute;
}
.position1{
	left: 0;
}
.position2{
	left: 180px;
}
.widht{
	width: 200px;
}
	div#dropBtn {
	    /*border: 1px solid #ccc;*/
	    /*padding: 0 20px;*/
	    margin: 0 200px;
	    /* width: 200px; */
	    position: relative;
	}
	span#pullBtn {
    border: 1px solid #333;
    padding: 5px 20px;
    display: inline-block;
}
	.con{
    /* display: none; */
    /*width: 200px;*/
    height: 140px;
    overflow: hidden;
    position: relative;
    top: 0;
    background-color: #e2ddff;
    border: 1px solid #a39fb7;
}
.jxs-drop-layer{
  width: 100%;
  position: absolute;
  left: 0;
  color: #fff;
  background-color: #454545;
}

.Con_Scorll{
  width: 20px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: yellow;
}
.Do_Scorll{
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: red;
}

	div#box {
	    position: relative;
	    top: 0;
	    left: 0;
	    border: 1px solid #349651;
	    background: #ecfff0;
	}
	ul.box-list-cont li{
		border: 1px solid #e1f5e6;
		display: none;
	}
	.drop-layer-cont li:hover,ul.box-list-cont li:hover{
		background: red;
	}
	ul.box-list-cont span,.drop-layer-cont span{
		display: block;
		padding: 5px;
	}
</style>
</html>